<template>
  <div class="tree-wrap">
    <div style="margin-bottom: 10px">
      <el-input
          size="small"
          v-model="filterText"
          placeholder="请输入部门名称搜索"
      ></el-input>
    </div>
    <el-button @click="handleAdd" size="small" icon="el-icon-plus" class="default-btn add-btn">添加子部门</el-button>
    <el-tree
        class="custom-tree"
        ref="tree"
        :data="treeData"
        :props="{label:'name',children:'children'}"
        node-key="id"
        @node-click="nodeClick"
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
        :default-expanded-keys="defaultExpandedArray"
        :filter-node-method="filterNode"
        :expand-on-click-node="true"
        :highlight-current="true"
    >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="label" :title="node.label">{{ node.label }}  <span style="margin-left: 10px">({{data.userTotal}}人)</span></span>
          <el-dropdown @command="handleCommand($event,data)">
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
    </el-tree>
  </div>
</template>

<script>
import {sandbox} from '@/libs/util'
export default {
  name: "CatalogueTree",
  props: {
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch:{
    treeData(){
      this.defaultExpandedArray = JSON.parse(JSON.stringify(this.defaultExpandedKeys))
    },
    filterText(){
      this.searchTree()
    },
  },
  data() {
    return {
      visible:false,
      btnLoading:false,
      filterText:'',
      triggerBlur:false,
      defaultExpandedKeys:[],
      defaultExpandedArray:[],
      form: sandbox({
        Id: '',
      }),
      rules: {
        JobName: [{required: true, message: '必填项', trigger: 'blur'}],
      }
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    nodeClick(data, node){
      // node.expanded = !node.expanded
      this.$emit('getRowData',data)
    },
    // 展开节点时触发
    handleNodeExpand(data) {
      // return
      // 判断数组中有没有该节点的id
      if (!this.defaultExpandedKeys.includes(data.id)) {
        // console.log('展开',data.id)
        // 没有则添加到数组中
        this.defaultExpandedKeys.push(data.id);
      }
    },
    // 折叠节点时触发
    handleNodeCollapse(data) {
      // return
      // 判断数组中有没有该节点的id
      if (this.defaultExpandedKeys.includes(data.id)) {
        // console.log('折叠',data.id)
        // 有则获取到该id在数组中的下标
        const index = this.defaultExpandedKeys.findIndex(item => item === data.id);
        // 然后通过下标删除该节点的id
        this.defaultExpandedKeys.splice(index, 1);
      }
    },
    searchTree(){
      this.$refs.tree.filter(this.filterText);
    },
    handleAdd(){
      this.$emit('openDrawer','add')
    },
    handleCommand(command,row){
      console.log(command,row )
      this.$confirm('确认删除该部门？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_departmentManage_deleteDept({param: {deptId: row.id}})
            .then(() => {
              this.$emit('loadTree')
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
      })
    },
    handleSubmit(){
      this.$refs.drawerForm.validate(valid => {
        if (valid) {
          let form = sandbox(this.form)
          this.btnLoading = true
          ;(this.mode === 'add'
              ? this.$api.API_WEBSYSSTAFF_SAVECOMPANYJOB_POST
              : this.$api.API_WEBSYSSTAFF_SAVECOMPANYJOB_POST)({
            body: form,
            config: {showMsg: true}
          })
              .then(() => {
                this.visible = false
              })
              .finally(() => {
                this.btnLoading = false
              })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tree-wrap{
  position: relative;
  .add-btn{
    width: 100%;
    margin-bottom: 10px;
    background: #FFFFFF;
    color: #2774F4;
    border-radius: 8px 8px 8px 8px;
    border: 1px dashed #2774F4;
    &:hover{
      color: #0B085F;
      border: 1px dashed #0B085F;
    }
  }
}
.custom-tree{
  background: transparent;
}
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  flex: 1;

  .label{
    font-size: 12px;
  }
  .menu{
    width: 72px;
    font-size: 14px;
    right: 0;

  }

  .icon {
    margin-left: 10px;
    color: #666666;
    &:hover{
      color: #036FAE;
    }
  }
}
</style>
<style scoped>
.el-tree{
  display: inline-block;
  min-width: 100%;
}
/deep/ .custom-tree .el-tree-node__content:hover{
  background: #ECF2FF;
}

/deep/ .custom-tree .el-tree-node__expand-icon{
  color: #72787C;
}
/deep/ .custom-tree .el-tree-node__expand-icon.is-leaf{
  color: transparent;
}
</style>